<template>
  <!-- 购买 -->
  <div class="bgc">
    <van-cell title="第二章练习" class="wushipx">
      <template slot="default">
        <div class="blue">￥0.01</div>
      </template>
    </van-cell>

    <van-cell title="优惠码">
      <template slot="default" class="blue">
        <div class="blue">
          <van-icon name="plus" /> <span @click="show = true">添加</span>
        </div>
      </template>
    </van-cell>
    <van-cell title="积分折扣">
      <template slot="default" class="blue">
        <div class="duiqi">
          <span>0积分可用</span> <van-switch v-model="checked" />
        </div>
      </template>
    </van-cell>

    <van-cell class="mtershi" title="实付金额">
      <template slot="default" class="blue">
        <div class="blackBigfont">￥0.01</div>
      </template>
    </van-cell>
    <div class="tiaozheng">付款后可获得0积分</div>
    <span class="position">首选教育</span>
    <div class="button">确认支付</div>
    <!-- 优惠卷 -->
    <van-overlay :show="show" class="felx">
      <div class="box">
        <img src="@/assets/images/jifen.png" alt="" />
        <van-field v-model="value" placeholder="请输入优惠卷" />
        <van-button type="info">确认</van-button>
        <div @click="show = false" class="close">
          <van-icon color="#fff" name="cross" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      show: false,
      value: "",
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.felx {
  display: flex;
  align-items: center;
  justify-content: center;
  .box {
    position: relative;
    /deep/.close {
      position: absolute;
      bottom: -80px;
      border-radius: 40px;
      border: 1px solid #fff;
      left: 40%;
      width: 40px;
      height: 40px;
      i {
        margin-left: 8px;
        margin-top: 8px;
        font-size: 24px;
        color: #fff;
      }
    }
    width: 280px;
    height: 260px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    img {
      text-align: center;
      margin: 0px auto;
      text-align: center;
      display: block;
      width: 72px;
      height: 50px;

      clear: both;
      margin-top: 30px;
    }
    /deep/.van-field__control {
      width: 220px;
      height: 40px;
      margin: 0 auto;
      font-size: 16px;
      color: #757575;
      border: 1px solid #eeeeee;
      padding: 10px 10px 11px;
      display: block;
    }
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: red;
      /* placeholder字体大小  */
      font-size: 12px;
      /* placeholder位置  */
      text-align: right;
    }

    .van-button {
      display: block;
      margin: 0 auto;
      margin-top: 24px;
      width: 220px;
      height: 36px;
      border-radius: 18px;
      background: #0486fe;
      color: white;
      font-size: 16px;
    }
  }
}
.blue {
  color: #0486fe;
}
.blackBigfont {
  font-weight: 600;
  color: black;
}
.bgc {
  height: 100vh;
  background-color: #f6f6f6;
}
.position {
  position: absolute;
  bottom: 80px;
  color: #1e1e1e;
  left: 40%;
  font-size: 18px;
  color: #a4a5a8;
}
.tiaozheng {
  margin-top: 5px;
  margin-left: 14px;
  color: #a4a5a8;
}
.button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #0486fe;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
}
//调整距离
.wushipx {
  margin-bottom: 50px;
}
.mtershi {
  margin-top: 20px;
}
//对齐
.duiqi {
  display: flex;
  justify-content: flex-end;
  span {
    line-height: 31px;
    margin-right: 5px;
  }
}
</style>
